<template>
	<view class="">
		<view class="titNum">
			<view class="titNum-msg">
				<view class="titNum-msg-msg">{{chartData.totalIntegral}}</view>
				<view class="titNum-msg-msg1">总积分</view>
			</view>
			<view class="titNum-msg">
				<view class="titNum-msg-msg">{{chartData.totalAdd}}</view>
				<view class="titNum-msg-msg1">总加分</view>
			</view>
			<view class="titNum-msg">
				<view class="titNum-msg-msg">{{chartData.totalSub}}</view>
				<view class="titNum-msg-msg1">总减分</view>
			</view>
		</view>
		<view class="boadMsg">
			<view class="charts-box">
				<qiun-data-charts type="area" :ontouch="true" :opts="opts" :chartData="chartData"
					tooltipFormat="tooltipDemo1" />
			</view>
			<view class="fx">
				<view class="fx-tit">
					村事项分析
				</view>
				<view class="fx-tit1">
					<text class="fx-tit-num">{{totalPie}}</text>
					总事项数
				</view>
				<view class="fx-num">

					<view class="titNum-msg" v-for="(item,index) in chartDataPie.list" :key="index">
						<view class="titNum-msg-msg">{{item.num}}</view>
						<view class="titNum-msg-msg1">{{item.tit}}</view>
						<!-- <view class="titNum-msg-dot" :style="{ background:  item.color }"></view> -->
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="pie" :opts="optsPie" :chartData="chartDataPie" />
				</view>
			</view>

		</view>
<home></home>
	</view>
</template>

<script>
	import home from '@/components/home/index.vue'
	import {
		chartCircle,
		chartLine
	} from '@/api/togeterRich/family.js'
	export default {
		components:{
			home
			
		},
		data() {
			return {
				totalPie: '',
				// 饼状图数据
				chartDataPie: {},
				optsPie: {
					// radius: ['50%', '100%'],
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE"],
					// padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				// 折线图数据
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					enableScroll: true,

					xAxis: {
						scrollShow: true,
						itemCount: 4,
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
							activeType: "hollow"
						}
					}
				}
			}
		},
		onLoad() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				chartLine().then(res => {
					console.log(res, 'ijijiojoin')
					this.chartData = JSON.parse(JSON.stringify(res.data));
				})
				chartCircle().then(res => {
					this.chartDataPie = JSON.parse(JSON.stringify(res.data));
					this.totalPie = res.data.total
					console.log(this.chartDataPie, 'sss')
				})
				return;
				// 折线图数据
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//饼状图数据
					let resPie = {
						list: [{
								tit: '总1减分',
								num: 50,
								color: '#1890FF'
							},
							{
								tit: '总减分1',
								num: 30,
								color: "#91CB74"
							}

						],
						series: [{
							data: [{
								"name": "测试事项2",
								"value": 50
							}, {
								"name": "测试事项",
								"value": 50
							}]
						}]
					};


					this.chartDataPie = JSON.parse(JSON.stringify(resPie));
					return;
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					// 折线图数据
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026",
							"2027", "2028", "2029"
						],
						series: [{
								name: "成交量A",
								data: [35, 8, 25, 37, 4, 20, 10, 2, 15, 12, 8, 6]
							},
							{
								name: "成交量B",
								data: [37, 4, 20, 10, 2, 35, 10, 2, 15, 12, 8, 6]
							},
							{
								name: "成交量C",
								data: [35, 37, 4, 20, 10, 2, 15, 12, 8, 68, 25, ]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fx {
		width: 100%;
		margin: 20rpx auto;

		.fx-num {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.titNum-msg {
				width: 20%;
				margin: 10rpx 0;
				font-size: 44rpx;
				color: #000;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.titNum-msg-msg1 {
				font-size: 24rpx;
				margin: 10rpx 0;
				color: #999;
			}

			.titNum-msg-dot {
				width: 20rpx;
				height: 20rpx;
				background: blue;
				border-radius: 50%;
			}
		}

		.fx-tit1 {
			color: $maincolor;
			font-size: 24rpx;
			margin-top: 20rpx;

			.fx-tit-num {
				font-size: 44rpx
			}
		}

		.fx-tit {
			font-size: 32rpx;
			color: #000;

		}
	}

	.charts-box {
		height: 600rpx;
	}

	.boadMsg {
		padding: 100rpx 30rpx;
		background: #fff;
		border-radius: 100rpx 100rpx 0 0;
		// margin-top: 20rpx;
		margin-top: -86rpx;
	}

	.titNum {
		width: 100%;
		display: flex;
		justify-content: space-around;
		background: $maincolor;
		padding: 40rpx 0;
		height: 250rpx;

		.titNum-msg {
			width: 30%;
			text-align: center;

			.titNum-msg-msg1 {
				color: #fff;
				font-size: 24rpx;
			}

			.titNum-msg-msg {
				color: #fff;
				font-size: 44rpx;
			}
		}
	}
</style>